<template>
	<view class="container">
		<view class="form">
			<view class="form-item u-f-jsb">
				<view>账号名称</view>
				<input type="text" auto-focus v-model="userName" placeholder="输入账号名称" placeholder-class="pla-class" />
			</view>
			<view class="form-item u-f-jsb">
				<view>登录账号(手机号)</view>
				<input type="text" v-model="userCode" placeholder="输入登录账号" placeholder-class="pla-class" />
			</view>
			<view class="form-item u-f-jsb">
				<view>登录密码</view>
				<input type="text" v-model="userPwd" placeholder="输入登录密码" placeholder-class="pla-class" />
			</view>
		</view>
		<view class="u-f-jsb set" @tap="isPromoter = false" v-if="userinfo.profitSharerRole == 3">
			<view :class="{ active: isPromoter }">设置为子账号</view>
			<view :class="[isPromoter ? 's1' : 's2']"></view>
		</view>
		<view class="u-f-jsb set" @tap="isPromoter = true" v-if="userinfo.profitSharerRole == 3">
			<view :class="{ active: isPromoter }">设置为推广员</view>
			<view :class="[!isPromoter ? 's1' : 's2']"></view>
		</view>
		<button type="default" class="btn-add" @tap="addSubaccount">确认添加</button>
		<view class="tips">说明：子账户具备除提现操作以外的所有权限（不含推广员）</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userPhone:'', // 用户手机号
			userCode:'' ,//登陆账号
			userPwd:'' , //登陆密码
			userName:'', // 姓名
			isPromoter: false,
		};
	},
	computed: {
		userinfo() {
			return this.$store.state.userinfo;
		}
	},
	methods: {
		radioChange(e) {
			console.log(e);
		},
		addSubaccount(){
			const {userName, userPwd, userCode, isPromoter} = this;
			if(userName == '' || userPwd == '' || userCode=='') {
				return uni.showToast({
					title:'请填写完整',
					icon:'none'
				})
			}
			if(!this.$u.test.mobile(userCode)) {
				return uni.showToast({
					title:'登录账号请填写手机号',
					icon:'none'
				})
			}
			let userRole = isPromoter ? 2 : 0;
			this.$u.api._addSubaccount({userName, userPwd, userCode,userRole}).then(res => {
				uni.showToast({
					title:'添加成功'
				})
				setTimeout(() => {
					uni.$emit('editAccount');
					uni.navigateBack();
				},888);
			})
		},
	}
}
</script>

<style lang="scss">
page {
	background-color: RGBA(245, 245, 245, 1);
}

.container {
	padding: 20rpx;

	.form {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 0 30rpx;
		.form-item {
			font-size: 30rpx;
			color: rgba(52, 52, 52, 1);
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;
			> view {
				font-weight: 600;
			}

			input {
				text-align: right;
				padding-right: 30rpx;
			}
		}
	}

	.btn-add {
		background: #323e56;
		border-radius: 20rpx;
		color: #ffffff;
		font-size: 32rpx;
		line-height: 90rpx;
		margin-top: 30rpx;
	}
}
.pla-class {
	color: rgba(204, 204, 204, 1);
	font-size: 30rpx;
}
.tips {
	margin-top: 30rpx;
	color: #666666;
}

.set {
	padding: 20rpx 30rpx;
	color: #333333;
	font-size: 30rpx;
	font-weight: 600;

	.s1,
	.s2 {
		width: 44rpx;
		height: 44rpx;
		background: url(../../../static/images/icon-gou1.png) no-repeat;
		background-size: cover;
	}
	.s2 {
		background: url(../../../static/images/icon-gou2.png) no-repeat;
		background-size: cover;
	}
}
</style>
